<template>
  <el-col :span="12" class="container-left business">
    <div class="title">青岛市民中心政务数据统计</div>
    <el-row>
      <el-col :span="8">
        <div class="panel-left-1 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px">
            <div class="subTit">
              <img
                src="../../assets/icon/icon-reception.png"
                width="28px"
              />改革创新成果
            </div>
            <div class="disk">
              <div class="txt">
                <p v-for="(item, index) in qdmlbzData" :key="index">
                  <b>{{ item.name }}</b>
                  <span>{{ item.value }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-left-2 item-box-container">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 20px 20px 10px 20px">
            <div class="subTit">
              <img
                src="../../assets/icon/icon-reception.png"
                width="28px"
              />一窗受理情况（本周）
            </div>
          </div>
          <div class="ycslBox">
            <div class="item" v-for="(item, index) in ycslArr2" :key="'ycslArr2-'+index">
              <div class="num" :style="{ color: item.color }">
                {{ item.value }}
              </div>
              <div class="tit" :style="{ color: item.color }">
                {{ item.name }}
              </div>
            </div>
            <div class="item" v-for="(item, index) in ycslArr" :key="index">
              <div class="num" :style="{ color: item.color }">
                {{ item.value }}
              </div>
              <div class="tit" :style="{ color: item.color }">
                {{ item.name }}
              </div>
            </div>
          </div>
          <!--追加-->
          <!-- <div style="padding: 20px 25px 0">
            <div class="subTit">
              <img
                src="../../assets/icon/icon-reception.png"
                width="28px"
              />一窗推进情况
            </div>
          </div> -->
          <!-- <div class="ycslBox">
            
          </div> -->
        </div>
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <div class="panel-right-1" style="height: auto">
              <div class="bjl-panel">
                <div class="bjl-tit" id="bjlTitle">近30个工作日办件量：</div>
                <ul class="bjl-num" id="bjlArr">
                  <!-- <li 
                    v-for="(item, index) in bjlArr" 
                    :key="index" :style="(index+1) % 3 === 0 ? 'margin-right: 10px': 'margin-right: 5px;'">
                    {{ item }}
                  </li> -->
                </ul>
              </div>
              <div
                id="myChart_1"
                :style="{ width: '100%', height: '480px' }"
              ></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="panel-right-2 item-box-container">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 0">
                <div class="subTit">
                  <img
                    src="../../assets/icon/icon-reception.png"
                    width="28px"
                  />市级依申请政务服务事项基本情况
                </div>
              </div>
              <div
                id="myChart_3"
                :style="{
                  width: '100%',
                  height: '320px',
                  display: 'inline-block',
                }"
              ></div>
              <!-- <div style="padding: 25px 25px 0;">
                <div class="subTit"><img src="../../assets/icon/icon-reception.png" width="28px" />2020年度示范窗口单位</div>
              </div>
              <div class="realData">
                <p class="messList">
                  市农业农村局、市发展改革委、青岛大港海关、市商务局、市水务管理局、市教育局、市市场监管局、综合受理处、工商银行、EMS快递、市住房公积金管理中心、市南区行政审批服务局、李沧区行政审批服务局、胶州市行政审批服务局、即墨区行政审批服务局、城阳区行政审批服务局、莱西市行政审批服务局、平度市行政审批服务局、西海岸新区行政审批服务局、崂山区行政审批服务局、市南区行政审批服务局、西海岸新区行政审批服务局、市北区行政审批服务局、李沧区行政审批服务局、崂山区行政审批服务局、胶州市行政审批服务局、城阳区行政审批服务局、崂山区行政审批服务局公共资源交易中心、董家口经济区公共服务部、经济技术开发区公共服务部
                </p>
              </div> -->
            </div>
          </el-col>
          <el-col :span="12">
            <div class="panel-right-3 item-box-container">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px">
                <div class="subTit">
                  <img
                    src="../../assets/icon/icon-reception.png"
                    width="28px"
                  />网办深度情况
                </div>
                <div
                  id="myChart_2"
                  :style="{ width: '100%', height: '320px' }"
                ></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
var timer; // 办件量刷新定时器
var timer2; // 大厅接待情况刷新定时器
export default {
  name: "businessManagement",
  components: {},
  data() {
    return {
      marginTop: 0, // 数据的margin-top
      timer: "", // 定时器
      dtjdData: {}, // 大厅接待情况数据
      cumulativeQhArr: [], // 累计取号量
      hotsArr: [], // 高频事项
      ycslArr: [], // 一窗受理
      // 一窗受理推进情况
      ycslArr2: [],
      bjlTitle: "近30个工作日办件量：", // 办件量名称
      bjlArr: [], // 本年度办件量
      bjl_x: [], // 本年办件量x轴数据
      bjl_y_win: [], // 本年、月、周办件量y轴窗口办理数据
      bjl_y_online: [], // 本年、月、周办件量y轴网上办件数据
      bjl_y_immediate: [], // 本年、月、周办件量y轴即办件数据
      hcpData: [], // 好差评数据
      bjlJumpTime: "", // 办件量年月周切换时间\
      dtjdqkTime: "",
      dataidx: 1, // 办件量年月周切换顺序
      qdmlbzData: [], // 清单目录编制情况数据

      sxjzdtData: [], // 依申请政务服务事项进驻大厅情况数据
      wbsdData: [], // 网办深度情况数据
    };
  },
  created() {
    clearInterval(timer);
    clearInterval(timer2);
    this.bjlTitle = "近30个工作日办件量：";
    // this.timer = setInterval(this.showNotice, 50) // 100表示间隔时间，数字越大滚得越快
  },
  mounted() {
    this.getYcslData(); // 一窗受理情况（本周）
    this.getBjlJumpTime(); // 获取切换时间
    this.getDtjdqkTime(); // 获取大厅接待情况刷新时间
    // this.getDtjd()
    this.getBjlData("month"); // 获取本年/月/周度办件量数据
    this.getBjlEchartData("month"); // 获取本年/月/周柱形图数据
    this.getHots(); // 获取热点事项数据
    this.getHcpData(); // 获取好差评数据
    this.getQdmlbzqkData(); // 获取"清单目录编制情况"数据
    this.getYcsltjData(); //获取"一窗受理推进情况"数据

    this.getSxjzdtData(); // 获取"依申请政务服务事项进驻大厅情况"数据
    this.getWbsdData(); // 获取"网办深度情况"数据
  },
  activated() {
    // this.getDtjd()
    // this.dataidx = 1
    // this.getBjlData('month') // 获取本年/月/周度办件量数据
    // this.getBjlEchartData('month') // 获取本年/月/周柱形图数据
    // clearInterval(timer)
    // clearInterval(timer2)
    // this.$nextTick(() => {
    //   this.getBjlJumpTime() // 获取切换时间
    //   this.getDtjdqkTime() // 获取大厅接待情况刷新时间
    // })
  },
  methods: {
    // 获取"网办深度情况"数据
    getWbsdData() {
      this.$http
        .post(window.SITE_CONFIG.apiURL + "/service656", {
          machineCode: "SfJjeyP0xmnS6h8R",
          url: "/power/getItemCountByOnlineDepth/1.0",
          postdata: {},
        })
        .then((res) => {
          let result = JSON.parse(res.body.result).data;
          let arr = [];
          // 把每一个对象的属性遍历出来
          Object.keys(result[0]).forEach(function (key) {
            if (key !== "市本级入驻大厅依申请总数") {
              arr.push({
                name: key,
                value: result[0][key],
              });
            }
          });
          this.wbsdData = [arr[arr.length - 1], ...arr];
          this.wbsdData.pop();
          this.renderChart_wbsdqk(); // 网办深度情况展示
        })
        .catch(() => {});
    },
    // 网办深度情况展示
    renderChart_wbsdqk() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_2"));

      // 绘制图表
      const option = {
        color: ["#469F4B", "#FFC530", "#3DE7C9", "#00BAFF"],
        legend: {
          type: "scroll",
          orient: "vertical",
          left: 10,
          top: "25%",
          icon: "roundRect", //  这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 12, // 设置宽度
          itemHeight: 12, // 设置高度
          textStyle: {
            color: "#ffffff",
            fontSize: 24,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["25%", "75%"],
            center: ["65%", "50%"],
            data: this.wbsdData,
            label: {
              normal: {
                formatter: (params) => {
                  return params.percent.toFixed(2) + "%";
                },
                fontSize: 20,
                padding: [0, -5, 0, -5],
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    // 获取"依申请政务服务事项进驻大厅情况"数据
    getSxjzdtData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/apply", {
          params: {},
        })
        .then((res) => {
          let result = res.body.data;
          this.sxjzdtData = result;
          this.renderChart_sxjzdtqk(); // 依申请政务服务事项进驻大厅情况
          // let result = res.bodyText && JSON.parse(res.bodyText)
          // if (result) {
          //   this.sxjzdtData = JSON.parse(result.list)
          //   this.sjrzdtNum = JSON.parse(result.actualObject.value)
          // }
        })
        .catch(() => {});
    },
    // 依申请政务服务事项进驻大厅情况
    renderChart_sxjzdtqk() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_3"));
      // 绘制图表
      const option = {
        color: [
          "#B3D465",
          "#3DE7C9",
          "#00B7EE",
          "#C71585",
          "#AE83FF",
          "#EECA00",
          "#7376FD",
          "#FF75A6",
          "#145B7D",
          "#EC6941",
          "#4FA000",
        ],
        legend: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["0", "60%"],
            center: ["50%", "50%"],
            data: this.sxjzdtData,
            label: {
              normal: {
                formatter: (params) => {
                  return params.name + " " + params.value + "项";
                },
                fontSize: 22,
                padding: [0, -15, 0, -15],
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    // 获取"一窗受理推进情况"数据
    getYcsltjData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryStatic", {
          params: {
            dictType: "accept_promotion",
          },
        })
        .then((res) => {
          let result = res.body.data;
          result[0].color = "#0DDE79";
          result[1].color = "#009CFF";
          result[2].color = "#00EAED";
          this.ycslArr2 = result;
        })
        .catch(() => {});
    },
    // 获取“清单目录编制情况”数据
    getQdmlbzqkData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/detail")
        .then((res) => {
          this.qdmlbzData = res.data.data;

          this.$http
            .get(window.SITE_CONFIG.apiURL + "/static/queryStatic", {
              params: {
                dictType: "inventory_catalog",
              },
            })
            .then((data) => {
              const d = data.body.data;
              this.qdmlbzData = this.qdmlbzData.map((item) => {
                if (item.name === "全市通办") {
                  item.value = d.filter((d) => d.name === "全市通办")[0].value;
                }
                if (item.name === "容缺受理") {
                  item.value = d.filter((d) => d.name === "容缺受理")[0].value;
                }
                return item;
              });
            })
            .catch(() => {});
        });
    },
    // 数据循环滚动
    // showNotice(){
    //   this.marginTop -= 1
    //   if(this.marginTop < -this.hotsArr.length * 60){ // 滚上去36px后把前两条数据拉下来
    //     this.hotsArr.push(this.hotsArr[0])
    //     this.hotsArr.shift()
    //     this.marginTop = 0
    //   }
    // },
    // 一窗受理情况（本周）
    getYcslData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryStatic", {
          params: {
            dictType: "acceptance",
            // type: 'week'
          },
        })
        .then((res) => {
          let result = res.body.data;
          result[0].color = "#00FF95";
          result[1].color = "#009CFF";
          result[2].color = "#00EAED";
          result[3].color = "#FFB026";
          result[4].color = "#08C7F1";
          result[5].color = "#CCFF44";
          this.ycslArr = result;
        })
        .catch(() => {});
    },
    // 获取本年/月/周度办件量数据
    getBjlData(type) {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/handling/queryQuantity", {
          params: {
            type,
          },
        })
        .then((res) => {
          let result = res.body.data;
          this.bjlArr = result === null ? [] : result.toString().split("");
          let ul = document.getElementById("bjlArr");
          var li = ul.firstElementChild;
          while (li) {
            li.remove();
            li = ul.firstElementChild;
          }
          for (let i = 0; i < this.bjlArr.length; i++) {
            const bjl = this.bjlArr[i];
            let li = document.createElement("li");
            li.innerHTML = bjl;
            if ((this.bjlArr.length - i + 2) % 3 === 0) {
              li.style = "margin-right: 12px";
            }
            ul.appendChild(li);
          }
          // console.log(document.getElementById('bjlArr'))
        })
        .catch(() => {});
    },
    // 获取办件量切换时间
    getBjlJumpTime() {
      let _this = this;
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/params", {
          params: {
            paramCode: 1002,
          },
        })
        .then((res) => {
          let result = res.body.data;
          _this.bjlJumpTime = result;
          this.$nextTick(() => {
            this.changeData();
          });
        })
        .catch(() => {});
    },
    // 本年、月、周办件量每3秒后切换
    changeData() {
      timer = setInterval(() => {
        this.dataidx = this.dataidx === 2 ? 0 : this.dataidx + 1;
        // let dataidx = Math.floor(Math.random() * 3) // 生成随机数（0、1、2）
        let type;
        switch (this.dataidx) {
          case 0: // 本年
            this.bjlTitle = "本年度办件量：";
            type = "year";
            break;
          case 1: // 本月
            this.bjlTitle = "近30个工作日办件量：";
            type = "month";
            break;
          case 2: // 本周
            this.bjlTitle = "近7个工作日办件量：";
            type = "week";
            break;
        }
        document.getElementById("bjlTitle").textContent = this.bjlTitle;
        this.getBjlData(type);
        this.getBjlEchartData(type);
      }, 1000 * this.bjlJumpTime);
    },
    // 获取大厅接待情况切换时间
    getDtjdqkTime() {
      let _this = this;
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/params", {
          params: {
            paramCode: 1003,
          },
        })
        .then((res) => {
          let result = res.body.data;
          _this.dtjdqkTime = result;
          this.$nextTick(() => {
            this.changeDtjdData();
          });
        })
        .catch(() => {});
    },
    changeDtjdData() {
      timer2 = setInterval(() => {
        // this.getDtjd()
      }, 1000 * this.dtjdqkTime);
    },
    // 获取大厅接待情况数据
    // getDtjd() {
    //   this.$http.get(window.SITE_CONFIG.apiURL + '/service650', {}).then(res => {
    //     if (res.body && res.body.statusCode) {
    //       let result = res.body
    //       // this.cumulativeQhArr = result.Cnum.toString().split('')
    //       // this.dtjdData = result
    //     } else {
    //       // this.getDtjd()
    //     }
    //   }).catch(() => {})
    // },
    // 获取本年/月/周柱形图数据
    getBjlEchartData(type) {
      this.bjl_x = [];
      this.bjl_y_win = [];
      this.bjl_y_online = [];
      this.bjl_y_immediate = [];
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/handling/queryHandling", {
          params: {
            type,
          },
        })
        .then((res) => {
          let result = res.body.data;
          result.map((item) => {
            if (type === "year") {
              this.bjl_x.push(item.days + "月");
            } else {
              this.bjl_x.push(item.days);
            }
            this.bjl_y_win.push(item.win);
            this.bjl_y_online.push(item.network);
            this.bjl_y_immediate.push(item.immediate);
          });
          this.renderChart_bjl(type); // 本年、周度办件量
        })
        .catch(() => {});
    },
    // 本年\月\周度办件量
    renderChart_bjl(type) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_1"));
      let option = {};
      if (type === "month") {
        option = {
          grid: {
            top: "15%",
            left: "0%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            show: true,
            right: "0%",
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
              color: "#fff",
              fontSize: 22,
            },
          },
          xAxis: [
            {
              type: "category",
              // boundaryGap: false,
              axisLabel: {
                color: "#fff",
                fontSize: 20,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#397cbc",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#195384",
                },
              },
              data: this.bjl_x,
            },
          ],
          yAxis: [
            {
              name: "件",
              type: "value",
              nameTextStyle: {
                color: "#fff",
                fontSize: 23,
              },
              // min: 0,
              // max: 10000,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#ffffff",
                  fontSize: 20,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#27b4c2",
                },
              },
              axisTick: {
                // show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#11366e",
                },
              },
            },
          ],
          series: [
            {
              name: "窗口办件",
              type: "line",
              // stack: '总量',
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#0092f6",
                  lineStyle: {
                    color: "#0092f6",
                    width: 1,
                  },
                },
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              data: this.bjl_y_win,
            },
            {
              name: "网上办件",
              type: "line",
              // stack: '总量',
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#00d4c7",
                  lineStyle: {
                    color: "#00d4c7",
                    width: 1,
                  },
                },
              },
              data: this.bjl_y_online,
            },
            {
              name: "即办件",
              type: "line",
              // stack: '总量',
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#e8ab51",
                  lineStyle: {
                    color: "#e8ab51",
                    width: 1,
                  },
                },
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              data: this.bjl_y_immediate,
            },
          ],
        };
      } else {
        option = {
          legend: {
            right: "0%",
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
              fontSize: 22,
              color: "#ffffff",
            },
          },
          grid: {
            top: "15%",
            left: "0%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          },
          // tooltip: {
          //   trigger: 'axis',
          //   backgroundColor: "rgba(35, 47, 76, 0.5)",
          //   position: function (point) {
          //     // 固定在中部
          //     return [point[0], '40%']
          //   },
          //   textStyle:{
          //     // color:'rgba(124, 129, 173, 0.98)',
          //     fontSize: 18
          //   },
          //   axisPointer: {
          //     type: "shadow",
          //     label: {
          //       show: true,
          //       backgroundColor: 'transparent'
          //     },
          //     shadowStyle:{
          //       color:{
          //         type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          //         colorStops: [{
          //           offset: 0, color: 'rgba(100, 101, 171, 0)' // 0% 处的颜色
          //         }, {
          //           offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' // 50% 处的颜色
          //         },{
          //           offset: 0.999999, color: 'rgba(100, 101, 171, 1)' // 100% 处的颜色
          //         },{
          //           offset: 1, color: 'rgba(100, 101, 171, 1)' // 100% 处的颜色
          //         }],
          //         global: false // 缺省为 false
          //       }
          //     }
          //   }
          // },
          xAxis: [
            {
              type: "category",
              data: this.bjl_x, // x轴
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                // interval: 0,
                // rotate: -40, // x轴文字倾斜 -25
                textStyle: {
                  fontSize: 18,
                  color: "#ffffff",
                  fontWeight: 700,
                },
                margin: 20,
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 3; //一行显示几个字
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "件",
              nameTextStyle: {
                color: "#fff",
                fontSize: 23,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  fontSize: 22,
                  color: "#ffffff",
                },
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(218, 219, 219, 0.1)",
                },
              },
            },
          ],
          series: [
            {
              name: "窗口办件",
              type: "bar",
              data: this.bjl_y_win,
              barWidth: "11px",
              label: {
                show: false, // 不显示柱上的数字
                position: "top",
                offset: [0, 0],
                textStyle: {
                  color: "#fff",
                  fontSize: 18,
                },
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#0FBDFF", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#3F54D3", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  barBorderRadius: [4, 4, 0, 0],
                },
              },
            },
            {
              name: "网上办件",
              type: "bar",
              data: this.bjl_y_online,
              barWidth: "11px",
              label: {
                show: false,
                position: "top",
                offset: [0, -10],
                textStyle: {
                  color: "#fff",
                  fontSize: 18,
                },
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#1ED94F", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#F2F047", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  barBorderRadius: [4, 4, 0, 0],
                },
              },
            },
            {
              name: "即办件",
              type: "bar",
              data: this.bjl_y_immediate,
              barWidth: "11px",
              label: {
                show: false,
                position: "top",
                offset: [0, -20],
                textStyle: {
                  color: "#fff",
                  fontSize: 18,
                },
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#5EA2EF", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#D12D9C", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  barBorderRadius: [4, 4, 0, 0],
                },
              },
            },
          ],
        };
      }
      myChart.setOption(option);

      // 动态显示tootip
      // let faultByHourIndex = 0 // 播放所在下标
      // let faultByHourTime = setInterval(function() { //使得tootip每隔三秒自动显示
      //   myChart.dispatchAction({
      //     type: 'showTip', // 根据 tooltip 的配置项显示提示框。
      //     seriesIndex: 0,
      //     dataIndex: faultByHourIndex
      //   })
      //   faultByHourIndex++;
      //   // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
      //   if (faultByHourIndex >= option.series[0].data.length) {
      //     faultByHourIndex = 0
      //   }
      //   if (faultByHourIndex >= option.series[1].data.length) {
      //     faultByHourIndex = 0
      //   }
      //   if (faultByHourIndex >= option.series[2].data.length) {
      //     faultByHourIndex = 0
      //   }
      // }, 3000)
    },
    // 获取热点事项数据
    getHots() {
      this.$http
        .post(window.SITE_CONFIG.apiURL + "/service635", {
          machineCode: "SfJjeyP0xmnS6h8R",
          url: "/web/approvalqd/hotItem/1.0",
          postdata: {
            regionCode: "",
            userCode: "",
            topN: 10,
          },
        })
        .then((res) => {
          let result = JSON.parse(res.body.result);
          let arr = [];
          result.data.map((item, index) => {
            arr.push({
              id: index,
              INDEX: index + 1,
              ITEM_NAME: item.ITEM_NAME,
              CNT: item.CNT,
              PERCENT: (result.data[index].CNT / result.data[0].CNT) * 100, // 占比计算方式：top1占比 = top1次数/top1次数 ，top2占比= top2次数/top1次数，... , top10占比= top10次数/top1次数
            });
          });
          this.hotsArr = arr;
        })
        .catch(() => {});
    },
    // 获取好差评统计数据
    getHcpData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryStatic", {
          params: {
            dictType: "reviews",
          },
        })
        .then((res) => {
          let result = res.body.data;
          // let result = [
          //   {name: '非常满意', value: 193},
          //   {name: '满意', value: 1},
          //   {name: '基本满意', value: 0},
          //   {name: '不满意', value: 0},
          //   {name: '非常不满意', value: 0},
          // ]

          // result.map(item => {
          //   let obj = {
          //     name: item.name,
          //     value: item.value
          //   }
          //   arr.push(obj)
          // })
          this.hcpData = result;

          this.renderChart_hcp(); // 好差评统计
        })
        .catch(() => {});
    },
    // 好差评统计
    renderChart_hcp() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_4"));

      // 绘制图表
      const option = {
        color: ["#00FF95", "#FFE400", "#FF4800", "#FFA800", "#FF01C6"],
        legend: {
          show: false,
          type: "scroll",
          orient: "vertical",
          left: 10,
          top: "20%",
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 12, // 设置宽度
          itemHeight: 12, // 设置高度
          textStyle: {
            color: "#ffffff",
            fontSize: 23,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            center: ["50%", "60%"],
            data: this.hcpData,
            label: {
              normal: {
                formatter: (params) => {
                  return params.name + " " + params.percent.toFixed(1) + "%";
                },
                fontSize: 22,
                padding: [0, -5, 0, -5],
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.item-box-container {
  position: relative;
  .angle-left-top {
    left: 0;
    top: 0;
    border-top: 1px solid #037c93;
    border-left: 1px solid #037c93;
  }

  .angle-left-bottom {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #037c93;
    border-left: 1px solid #037c93;
  }

  .angle-right-top {
    right: 0;
    top: 0;
    border-top: 1px solid #037c93;
    border-right: 1px solid #037c93;
  }

  .angle-right-bottom {
    bottom: 0;
    right: 0;
    border-right: 1px solid #037c93;
    border-bottom: 1px solid #037c93;
  }
}
/**改革创新成果 */
@keyframes move {
  /*设置动画关键帧*/
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes opaci1 {
  /*设置动画关键帧*/
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
.disk {
  width: 100%;
  // height: 380px;
  height: 400px;
  background-image: url("../../assets/background/bg-disk.png");
  background-size: 49%;
  background-position: 50% 0px;
  background-repeat: no-repeat;
  position: relative;
  perspective: 0px;
  .txt {
    width: 50%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform-style: preserve-3d; /*设置3D属性让子元素三维空间呈现*/
    animation: move 18s linear infinite; /*设置动画*/
  }
  p {
    width: 28px;
    height: 160px;
    font-size: 26px;
    padding: 5px;
    float: left;
    text-align: center;
    position: absolute;
    left: 50%;
    transform-style: preserve-3d;
    span {
      position: relative;
      left: -8px;
    }
    &::after {
      content: "";
      width: 6px;
      height: 150px;
      position: absolute;
      right: 0px;
      top: 0;
      opacity: 0.4;
    }
    &:nth-child(1) {
      color: #ffc530;
      top: 90px;
      transform: rotateY(0deg) translateZ(105px);
      animation: opaci1 18s linear infinite; /*设置动画*/
    }
    &:nth-child(2) {
      color: #3de7c9;
      transform: rotateY(60deg) translateZ(105px);
      animation: opaci1 18s linear infinite 15s; /*设置动画*/
    }
    &:nth-child(3) {
      color: #469f4b;
      top: 80px;
      transform: rotateY(120deg) translateZ(105px);
      animation: opaci1 18s linear infinite 12s; /*设置动画*/
    }
    &:nth-child(4) {
      color: #ea68a2;
      top: 20px;
      transform: rotateY(180deg) translateZ(105px);
      animation: opaci1 18s linear infinite 9s; /*设置动画*/
    }
    &:nth-child(5) {
      color: #ff9100;
      top: 60px;
      transform: rotateY(240deg) translateZ(105px);
      animation: opaci1 18s linear infinite 6s; /*设置动画*/
    }
    &:nth-child(6) {
      color: #ae83ff;
      top: 40px;
      transform: rotateY(300deg) translateZ(105px);
      animation: opaci1 18s linear infinite 3s; /*设置动画*/
    }
  }
}
.title {
  height: 93px;
  background: url("../../assets/background/bg_tit.png") no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 25px 0;
  background-size: 100% 100%;
  // background-position-y: 25px;
}

.container-left {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00d2ff;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }

  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 大厅接待情况
  .panel-left-1 {
    border: 1px solid rgba(0, 255, 255, 0.1);
    height: 470px;
    // height: 500px;
    margin-bottom: 15px;
    .receptionBox {
      text-align: center;

      .cumulativeNum {
        text-align: left;
        margin-top: 50px;
        overflow: hidden;
        margin-left: 35px;

        .tit {
          font-size: 23px;
          color: #00fff0;
          float: left;
          position: relative;
          top: 5px;
        }

        .totalNum {
          overflow: hidden;
          float: left;
        }
        .totalNum li {
          width: 31px;
          height: 44px;
          float: left;
          background: #002870;
          font-size: 33px;
          color: #00fff0;
          text-align: center;
          margin-right: 5px;
          font-weight: 700;
        }
      }

      .item {
        padding-top: 40px;
        .tit {
          font-size: 27px;
          font-weight: 700;
        }

        .num {
          font-size: 38px;
          margin-top: 20px;
          color: #ccff44;
          font-weight: 700;
          background: url("../../assets/icon/icon-numBg.png") no-repeat;
          background-position: center;
          height: 85px;
          line-height: 85px;
        }
      }
    }
  }

  // 一窗受理情况
  .panel-left-2 {
    border: 1px solid rgba(0, 255, 255, 0.1);
    height: 450px;

    .smallTit {
      float: right;
      font-size: 22px;
    }

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-left-bottom {
    //   left: 0;
    //   bottom: 80px;
    //   border-bottom: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-right-top {
    //   left: 641px;
    //   border-top: 1px solid #037c93;
    //   border-right: 1px solid #037c93;
    // }

    // .angle-right-bottom {
    //   left: 641px;
    //   bottom: 80px;
    //   border-right: 1px solid #037c93;
    //   border-bottom: 1px solid #037c93;
    // }

    .ycslBox {
      overflow: hidden;
      // padding-left: 20px;
      text-align: center;
      padding-bottom: 15px;
      .item {
        border: 1px solid #3755da;
        width: 30%;
        // height: 106px;
        // margin-top: 30px;
        // margin-right: 17px;
        margin: 10px;
        display: inline-block;
        text-align: center;

        .tit {
          font-size: 22px;
          margin:10px 0 15px 0;
        }
        .num {
          font-size: 29px;
          font-weight: 700;
          margin: 10px 0;
        }
      }
    }
  }
  // 2020年度示范窗口单位
  .panel-right-2 {
    border: 1px solid rgba(0, 255, 255, 0.1);
    height: 381px;
    margin-left: 20px;

    // .angle-left-top {
    //   left: 20px;
    //   border-top: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-left-bottom {
    //   left: 20px;
    //   bottom: 0;
    //   border-bottom: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-right-top {
    //   left: 640px;
    //   border-top: 1px solid #037c93;
    //   border-right: 1px solid #037c93;
    // }

    // .angle-right-bottom {
    //   left: 640px;
    //   bottom: 0;
    //   border-right: 1px solid #037c93;
    //   border-bottom: 1px solid #037c93;
    // }

    .realData {
      height: 280px;
      margin: 20px 30px 0;
      padding-top: 15px;
      font-size: 23px;
      overflow: hidden;

      .messList {
        padding-top: 15px;
        animation: myMove 30s linear infinite;
        animation-fill-mode: forwards;
      }
      @keyframes myMove {
        0% {
          transform: translateY(150px);
        }
        100% {
          transform: translateY(-500px);
        }
      }

      p {
        height: 100%;
        color: #fff;
        line-height: 42px;
      }
      // ul {
      //   height: 100%;
      //   color: #fff;
      // }
      // ul li {
      //   overflow: hidden;
      //   margin-bottom: 20px;
      // }

      .index {
        width: 90px;
        font-size: 25px;
        font-weight: bold;
        float: left;
        color: #eddf48;
        margin-right: 10px;
        margin-top: 15px;
      }

      .tit {
        font-size: 25px;
        font-weight: bold;
        float: left;
        width: 430px;
      }

      .num {
        width: 110px;
        font-size: 29px;
        color: #00ffff;
        float: right;
        font-weight: 600;
        text-align: right;
      }

      .line {
        width: 100%;
        height: 6px;
        border-radius: 2px;
        margin: 8px 0;
        background: #141a6a;

        .linePercent {
          height: 100%;
          border-radius: 2px;
          background: linear-gradient(-90deg, #a8ff00, #54fff1);
        }
      }
    }
  }

  // 2020年度服务标兵
  .panel-right-3 {
    border: 1px solid rgba(0, 255, 255, 0.1);
    height: 381px;
    margin-left: 20px;

    // .angle-left-top {
    //   right: 621px;
    //   border-top: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-left-bottom {
    //   right: 621px;
    //   bottom: 0;
    //   border-bottom: 1px solid #037c93;
    //   border-left: 1px solid #037c93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037c93;
    //   border-right: 1px solid #037c93;
    // }

    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 0;
    //   border-right: 1px solid #037c93;
    //   border-bottom: 1px solid #037c93;
    // }

    .serviceModel {
      height: 280px;
      margin: 20px 10px 0;
      padding-top: 15px;
      font-size: 20px;
      overflow: hidden;

      .modelList {
        padding-top: 15px;
        animation: modelMove 60s linear infinite;
        animation-fill-mode: forwards;
        span {
          color: #00d2ff;
        }
      }
      @keyframes modelMove {
        0% {
          transform: translateY(150px);
        }
        100% {
          transform: translateY(-1500px);
        }
      }

      p {
        height: 100%;
        color: #fff;
        line-height: 30px;
      }
    }
  }
}
</style>
<style lang="scss">
// 本年度办件量
.panel-right-1 {
  height: 650px;
  margin-bottom: 15px;
  padding-left: 20px;

  .bjl-panel {
    overflow: hidden;
    .bjl-tit {
      font-size: 29px;
      font-weight: bold;
      float: left;
      line-height: 60px;
    }

    .bjl-num {
      float: left;
    }
    .bjl-num li {
      float: left;
      background: #002870;
      margin-right: 5px;
      font-size: 36px;
      font-weight: bold;
      padding: 3px 6px;
    }
  }
}
</style>